<html>
	<script type="text/javascript" src="../../../dojo/dojo.js"></script>
	<script type="text/javascript" src="../../dijit.js"></script>
	<script type="text/javascript">
//		dojo.require("dijit.Menu");
//		dojo.require("dojo.parser");	// scan page for widgets and instantiate them
	</script>

<style type='text/css'>
	@import "../tundra/tundra.css";
	@import "noir.css";

BODY {
	font-family:Arial;
	font-size:12px;
}

.oReset {
	margin:0px;
	padding:0px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	border-width:0px;
}




.dijitCombo INPUT {
	border-width:0px;
	color:white;
	background-color:black;
	font-size:.8em;
}



/* put class dijit_a11y on an outer node (such as BODY) to kick us into a11y mode */

.dijit_a11y * {
	background-image:none !important;
	color:black !important;
	background-color:transparent !important;
}


/* a11y indicators are hidden unless we're in a11y mode */
.dijitA11yIndicator,
.dijitA11yIndicatorSpan {
	display:none;
}

.dijit_a11y .dijitA11yIndicator {
	display:block !important;
}

.dijit_a11y .dijitA11yIndicatorSpan {
	display:inline !important;
}


/* make sure widgets have a border */
.dijit_a11y .widgetOuter {
	border:1px solid black;
}

</style>

<script language='javascript'>
	

	function startup() {
		var html = dojo.byId('noir').innerHTML;
		dojo.byId('tundra').innerHTML = html;
		dojo.byId('a11y').innerHTML = html;
	}

	function toggleOuterClass(element, event) {
		var baseName = element.getAttribute("toggleClass");
		var name = "widgetOuter " + baseName + " " + baseName;
		switch (event.type) {
			case "mouseover":	name += "Hover";	break;
			case "mousedown":	name += "Active";	break;
			case "mouseup":		name += "Hover";	break;
			case "mouseout":
			default:			name += "Enabled";	break;
		}
		element.className = name;
	}
</script>

<body onload='startup()'>

<div>


<table width='100%'>
<tr>
	<td><h2>Noir</h2></td>
	<td><h2>Tundra</h2></td>
	<td><h2>a11y</h2></td>
</tr>
<tr>
	<td id='noir' class='noir' valign=top>

		<!-- dijit.form.Button -->
		<div class="dijit dijitLeft dijitInline dijitButton"><div class='dijitRight'>
			<button class="dijitStretch dijitButtonNode dijitButtonContents" 
				tabIndex="${tabIndex}" type="${type}" id="${id}" name="${name}" alt="${alt}" 
				dojoAttachPoint="containerNode,focusNode" 
				dojoAttachEvent="onclick:buttonClick">
					${label}
			</button>
		</div></div>
&nbsp;
		<div class="dijit dijitLeft dijitInline dijitButton dijitButtonActive"><div class='dijitRight'>
			<button class="dijitStretch dijitButtonNode dijitButtonContents" 
				tabIndex="${tabIndex}" type="${type}" id="${id}" name="${name}" alt="${alt}" 
				dojoAttachPoint="containerNode,focusNode" 
				dojoAttachEvent="onclick:buttonClick">
					${label}
			</button>
		</div></div>

<br><br>
		
		<!-- dijit.form.DropDownButton -->

		<div class="dijit dijitLeft dijitInline dijitButton dijitDDButton"><div class='dijitRight'>
			<button tabIndex="${tabIndex}" class="dijitStretch dijitButtonNode" type="${type}" id="${id}" name="${name}" alt="${alt}" dojoAttachEvent="onclick:_onArrowClick, onkeypress:_onKey"
			dojoAttachPoint="popupStateNode,focusNode" waiRole="button" waiState="haspopup-true"
				><span class="dijitReset dijitButtonContents dijitButtonContentsDropDown" dojoAttachPoint="containerNode">${label}</span
				><span class='dijitDownArrow'>&#9660;</span>
			</button></div></div>
&nbsp;

		<div class="dijit dijitLeft dijitInline dijitButton dijitDDButton dijitDDButtonActive"><div class='dijitRight'>
			<button tabIndex="${tabIndex}" class="dijitStretch dijitButtonNode" type="${type}" id="${id}" name="${name}" alt="${alt}" dojoAttachEvent="onclick:_onArrowClick, onkeypress:_onKey"
			dojoAttachPoint="popupStateNode,focusNode" waiRole="button" waiState="haspopup-true"
				><span class="dijitReset dijitButtonContents dijitButtonContentsDropDown" dojoAttachPoint="containerNode">${label}</span
				><span class='dijitDownArrow'>&#9660;</span>
			</button>
		</div></div>

<br><br>		
		
		
		<!-- dijit.form.ComboButton -->
		<table class="dijit dijitLeft dijitInline dijitComboButton dijitComboButtonEnabled" id="${id}" name="${name}" 
			cellspacing=0 cellpadding=0>
			<tr>
				<td class='dijitReset dijitLeft'>&nbsp;</td>
				<td	class="dijitStretch dijitButtonContents dijitButtonNode"
					dojoAttachEvent="onclick:buttonClick, onkeypress:_onKey"
					tabIndex="${tabIndex}" dojoAttachPoint="containerNode,focusNode">
					${label}
				</td>
				<td class='dijitReset dijitRight dijitComboButtonArrow dijitButtonNode'
					dojoAttachPoint="popupStateNode"
					dojoAttachEvent="onclick:_onArrowClick, onkeypress:_onKey"
					tabIndex="${tabIndex}"
					waiRole="button" waiState="haspopup-true"
					><span class='dijitA11yDownArrow'>&#9660;</span>
			</td></tr>
		</table>		
&nbsp;
		<div class="dijit dijitLeft dijitInline dijitComboButton dijitComboButtonActive" id="${id}" name="${name}"
		><button type="${type}"
				class="dijitStretch dijitButtonContents dijitButtonNode"
				dojoAttachEvent="onclick:buttonClick, onkeypress:_onKey"
				tabIndex="${tabIndex}" dojoAttachPoint="containerNode,focusNode">
				${label}
			</button><button type='${type}' class='dijitRight dijitComboButtonArrow dijitButtonNode'
					dojoAttachPoint="popupStateNode"
					dojoAttachEvent="onclick:_onArrowClick, onkeypress:_onKey"
					tabIndex="${tabIndex}"
					waiRole="button" waiState="haspopup-true"
			>&nbsp;<span class='dijitDownArrow'>&#9660;</span>
			</button></div>		

<br><br>

		<!-- dijit.form.FilteringSelect 
			 dijit.form.ComboBox 
		-->

<table class="dijitReset dijit dijitInline dijitComboBox" id='widget_${id}' waiRole="presentation" cellspacing=0 cellpadding=0
	><tr>
		<td class='dijitReset dijitLeft'>&nbsp;</td>
		<td class='dijitReset dijitStretch XdijitInputField XdijitComboBoxInput'
			><input type="text" autocomplete="off" name="${name}" style='border:0px;padding:.2em;'
			dojoAttachEvent="onkeypress, onkeyup, onfocus, onblur, compositionend,onmouseover:_onMouse,onmouseout:_onMouse"
			dojoAttachPoint="textbox,focusNode" id='${id}'
			tabIndex='${tabIndex}' size='${size}' maxLength='${maxLength}'
	></td><td class='dijitReset dijitRight dijitButtonNode dijitArrowButton'
			dojoAttachPoint="downArrowNode"
			dojoAttachEvent="onclick:_onArrowClicked,onmousedown:_onMouse,onmouseup:_onMouse,onmouseover:_onMouse,onmouseout:_onMouse"
			tabIndex="${tabIndex}"
			waiRole="button" waiState="haspopup-true"
		><span class='dijitA11yDownArrow'>&#9660;</span
	></td
></tr></table>


<!--
<div class="dijit dijitLeft dijitInline dijitComboBox dijitComboBoxDisabled" id='widget_${id}' waiRole="presentation"
	><input type="text" autocomplete="off" class="dijitStretch dijitInputField dijitComboBoxInput" name="${name}"
			dojoAttachEvent="onkeypress, onkeyup, onfocus, onblur, compositionend,onmouseover:_onMouse,onmouseout:_onMouse"
			dojoAttachPoint="textbox,focusNode" id='${id}'
			tabIndex='${tabIndex}' size='${size}' maxLength='${maxLength}'
	><button class='dijitRight dijitButtonNode dijitArrowButton'
			dojoAttachPoint="downArrowNode"
			dojoAttachEvent="onclick:_onArrowClicked,onmousedown:_onMouse,onmouseup:_onMouse,onmouseover:_onMouse,onmouseout:_onMouse"
			tabIndex="${tabIndex}"
			waiRole="button" waiState="haspopup-true"
		><span class='dijitTeeny'>&nbsp;</span><span class='dijitA11yDownArrow'>&#9660;</span
	>&nbsp;</button
></div>
-->

<!--
		<span class='dijit dijitInline widgetLeft dijitCombo dijitComboEnabled' toggleClass="dijitCombo">
			<div class='widgetRight' onclick='console.info("right")'>
				<div class='a11yIndicator a11yDownArrow'>&#9660;</div>
				<div class='widgetStretch label' onclick='console.info("center");'>
					Select
				</div>	
			</div>
		</span>
		
		<br><br>
		
		<!- - dijit.form.ComboBox 
		<span class='dijit dijitInline widgetLeft dijitCombo dijitComboEnabled'>
			<div class='widgetRight' style='position:relative;' onclick='console.info("right")'>
				<div class='a11yIndicator a11yDownArrow'>&#9660;</div>
				<div class='widgetStretch label' onclick='console.info("center");'>
					<input type='text' class='' value='Combo'>
				</div>
			</div>
		</span>
-->
	</td>
	<td id='tundra' class='tundra' valign=top></td>
	<td id='a11y' class='dijit_a11y' valign=top></td>
</tr>
</table>
</body>
</html>
